<template>
  <div>
    <h1>学生信息录入</h1>
    <el-row class="tac">
      <el-col :span="18" :offset="3">
        <div class="stu_info">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="学号">
              <el-input v-model="form.stu_id"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.stu_name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio v-model="form.stu_sex" label="女">女</el-radio>
              <el-radio v-model="form.stu_sex" label="男">男</el-radio>
            </el-form-item>
            <el-form-item label="籍贯">
              <div class="block">
                <el-cascader
                  v-model="form.stu_jg"
                  :options="options"
                  :props="area"
                  @change="handleChange"
                ></el-cascader>
              </div>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="form.stu_date"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="爱好">
              <el-input v-model="form.stu_hobby"></el-input>
            </el-form-item>
            <el-form-item label="男或女朋友">
              <el-input v-model="form.stu_gbf"></el-input>
            </el-form-item>
            <el-form-item label="头像">
              <input type="file" @change="getFile" ref="getInp" />
              <img class="imgSize" :src="form.stu_head_img" alt="" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交数据</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ajax from "../../ajax/ajax";
import {
  Form,
  FormItem,
  Input,
  Button,
  Radio,
  Cascader,
  DatePicker,
} from "element-ui";
export default {
  name: "",
  props: [""],
  data() {
    return {
      options: [],
      area: {
        label: "name",
        value: "name",
        children: "children",
        // expandTrigger: "hover",
      },
      form: {
        stu_id: "",
        stu_name: "",
        stu_sex: "男",
        stu_jg: [], //当发送ajax 将该数组变为字符串
        stu_head_img: "",
        stu_gbf: "",
        stu_hobby: "",
        stu_date: new Date(),
      },
    };
  },

  components: {
    "el-form": Form,
    "el-form-item": FormItem,
    "el-input": Input,
    "el-button": Button,
    "el-radio": Radio,
    "el-cascader": Cascader,
    "el-date-picker": DatePicker,
  },

  computed: {},

  beforeMount() {},

  created() {},
  async mounted() {
    // console.log(this.options);
    const result = await ajax("get", "/area", {}, "form");
    console.log(result);
    this.options = result;
    console.log(this.options);
  },

  methods: {
    async onSubmit() {
      console.log("submit!");
      //   收集表单数据 将数据发送给后台 ajax
      //   籍贯一般都是以字符串的格式   当前的籍贯是数组
      this.form.stu_jg = this.form.stu_jg.join("-");
      console.log(this.form);
      //  使用axios二次封装的方法进行数据提交
      let result = await ajax("post", "student_info", this.form, "form");
      console.log(result);
    },
    handleChange(value) {
      console.log(value);
    },
    getFile() {
      let f = this.$refs.getInp.files[0];
      console.log(f);
      let that = this;
      let fr = new FileReader();
      fr.readAsDataURL(f);
      fr.onload = function () {
        // console.log(fr.result);
        that.form.stu_head_img = fr.result;
      };
    },
  },

  watch: {},
};
</script>
<style lang='css' >
/* .stu_info {
  padding: 50px;
  box-sizing: border-box;
} */
.stu_info .el-form-item__label {
  color: #f5f5f5;
}
.test {
  height: 400px;
  overflow: hidden;
}
.el-popper .el-cascader__dropdown {
  height: 400px;
  overflow: hidden;
}
.imgSize {
  width: 50px;
  height: 50px;
}
</style>